<script setup>
const props = defineProps({
    list: {
        type: Array,
        default: []
    },
    keyName: {
        type: String,
        default: "key"
    },
    valueName: {
        type: String,
        default: "value"
    },
    valueInputType: {
        type: String,
        default: "text"
    },
    readonly: {
        type: Boolean,
        default: false
    },
    keyWidth: {
        type: String,
        default: ""
    },
    valueWidth: {
        type: String,
        default: ""
    },
    rows: {
        type: null
    },
    keyReadonly: {
        type: Boolean,
        default: false
    },
    valueReadonly: {
        type: Boolean,
        default: false
    },
    showOptions: {
        type: Boolean,
        default: true
    },
})

const addTableRow = ()=> { // 添加行方法
  const newRow = {
    key: "",
    value: ""
  }
  if (props.list == null || props.list == undefined) {props.list = []}
  props.list.unshift(newRow)
}

const deleteTableRow = (index) => { // 删除行方法
    props.list.splice(index, 1)
}

</script>

<template>
    <el-table 
    border
    :data="props.list" 
    style="width: 100%"
    height="360px"
    >
        <el-table-column :width="props.keyWidth" align="center" prop="key" :label="props.keyName">
            <template #default="scope">
                <el-input :disabled="props.keyReadonly || props.readonly" v-model="scope.row.key" placeholder="请输入键"/>
            </template>
        </el-table-column>

        <el-table-column align="center" prop="value" :label="props.valueName">
            <template #default="scope">
                <el-input
                :disabled="props.valueReadonly || props.readonly" :rows="props.rows"
                v-model="scope.row.value" :type="props.valueInputType" placeholder="请输入值"/>
            </template>
        </el-table-column>

        <el-table-column align="center" fixed="right" width="120px" v-if="props.showOptions">
            <template #header>
                <el-button :disabled="props.readonly" link type="primary" @click="addTableRow()">添加</el-button>
            </template>
            <template #default="scope">
                <el-button :disabled="props.readonly" link type="warning" @click="deleteTableRow(scope.$index)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<style scoped>
</style>
